<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<title></title>
		<style type="text/css">
			#div1 {

				width: 100px;
				height: 100px;
				background-color: orange;
				position: absolute;
				top: 0px;
				left: 0px;
				opacity: 0.5;

			}
		</style>
	</head>
	<body>
		<!-- <p id="p">点我呀！！！</p> -->
		<a id="as" href="http://www.miaov.com">点我呀！！！</a>
		<div id="div1">

		</div>
		<script type="text/javascript">
			/*
			移动端的点透：
			当上层元素发生点击的时候，下层元素也有点击（焦点）特性，在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为。
			解决：
			1.下层不要使用有点击（焦点）特性的元素a。
			2.阻止PC默认事件
			3.移动端尽量不要用PC事件click,会有不兼容 
			*/
			document.addEventListener("touchstart", function(ev) {
				ev.preventDefault(); //阻止PC默认事件
			})

			var div = document.getElementById('div1');
			/* var p = document.getElementById('p'); */
			var a = document.getElementById('as');
			div.addEventListener('touchend', end);
			a.addEventListener('touchstart', function() {
				window.location.href = 'http://www.miaov.com';
			});

			function end() {
				this.style.display = 'none';
			}
		</script>
	</body>
</html>
